const uname = document.querySelector('.mb-0.text-sm.font-weight-bold.username')
uname.innerHTML = localStorage.getItem('uname')


async function getdata() {

    let token = localStorage.getItem('token')
    let res = await axios({
        url: '/dashboard',

    })
    console.log(res)

    document.querySelector('.h3.font-weight-bold.mb-0.salary').innerHTML = res.data.data.overview.salary
    document.querySelector('.h3.font-weight-bold.mb-0.student_count').innerHTML = res.data.data.overview.student_count
    document.querySelector('.h3.font-weight-bold.mb-0.age').innerHTML = res.data.data.overview.age
    document.querySelector('.h3.font-weight-bold.mb-0.group_count').innerHTML = res.data.data.overview.group_count

    renderline(res.data.data.year)
    renderpie(res.data.data.salaryData)
    renderbar(res.data.data.groupData[1])
    // renderbar(res.data.data.groupData[1])
    //    console.log(res.data.data.groupData[1]) 
    // 渲染班级每组资金
    // 用排他思想，给每个按钮添加点击事件，
    // 点击按钮时，将按钮的样式改变。
    let btn = document.querySelectorAll('.btn.btn-xs')
    btn.forEach((item, index) => {
        item.addEventListener('click', function () {
            document.querySelector('.btn.btn-xs.btn-blue').classList.remove('btn-blue')
            this.classList.add('btn-blue')
            renderbar(res.data.data.groupData[index + 1])
        })
    })


}


// 线型图
function renderline(arr) {
    let myChart = echarts.init(document.querySelector('#line'));
    let option = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: arr.map(item => item.month)
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: arr.map(item => item.salary),
                type: 'line',
                areaStyle: {},
                smooth: true,
                symbolSize: '10',// 标记尺寸
                lineStyle: {// 标记尺寸
                    width: '8',// 宽度
                },
                areaStyle: {// 区域样式
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'blue' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
                lineStyle: {// 线样式
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [{
                            offset: 0, color: 'skyblue' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'blue' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    },
                    width: 8
                }

            }
        ]
    };
    myChart.setOption(option);
}

// 环状图
function renderpie(arr) {
    let myChart = echarts.init(document.querySelector('#salary'));
    let option = {
        title: {
            text: '班级薪资分布'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: '5%',
            left: 'center'
        },
        series: [
            {
                type: 'pie',
                radius: ['60%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 30,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                // 使用map处理数据，用return来返回一个新的对象，
                // 使对象里的数据与所想要的数据结构一致
                data: arr.map(item => {
                    return {
                        value: item.g_count + item.b_count,
                        name: item.label
                    }
                })
            }
        ]
    };
    myChart.setOption(option);
}

// 排他思想与1-8个柱状图
function renderbar(arr) {
    let myChart = echarts.init(document.querySelector('#lines'));
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        legend: {
            data: ['Evaporation', 'Precipitation', 'Temperature']
        },
        xAxis: [
            {
                type: 'category',
                data: arr.map(item => item.name),
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '薪资',
                axisLabel: {
                    formatter: '{value} '
                }
            },

        ],
        series: [
            {
                name: 'hope_salary',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return value;
                    }
                },
                data: arr.map(item => item.hope_salary)
            },
            {
                name: 'salary',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return value;
                    }
                },
                data: arr.map(item => item.salary)
            }
        ]
    };
    myChart.setOption(option);
}



// 退出功能复用
logout()
// 渲染页面
getdata()